<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>主页展示</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                <el-col :span="24" class="hf location">
                    <el-avatar :size="200">
                        <img src="../assets/logo.jpg"/>
                    </el-avatar>
                </el-col>
            </el-row>
            <el-carousel :interval="4000" type="card" height="405px">
                <el-carousel-item v-for="(item, i) in pics" :key="i">
                    <img :src="item.pic" class="imgsize">
                </el-carousel-item>
            </el-carousel>
        </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      pics: [
        { pic: require('../assets/2.png') },
        { pic: require('../assets/4.jpg') },
        { pic: require('../assets/5.jpg') },
        { pic: require('../assets/6.png') },
        { pic: require('../assets/2.png') },
        { pic: require('../assets/4.jpg') },
        { pic: require('../assets/5.jpg') },
        { pic: require('../assets/6.png') }
      ]
    }
  },
  created() {
    this.openTip()
  },
  methods: {
    openTip() {
      const h = this.$createElement
      this.$notify({
        title: window.sessionStorage.getItem('username') + '  欢迎您',
        message: h('i', { style: 'color: teal' }, '本项目仅是对vue电商管理后台前端进行整合编写，部分功能后端有待完善')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.imgsize {
  width: 720px;
  height: 405px;
}
.hf {
  height: 360px;
  // background-color: pink;
}
.location {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
